[iOS][Swift3.0] テキスト入力時のエフェクトが美しいTextFieldEffects

サインイン画面や登録画面などアプリから文字を入力するケースは多々あります。
今回はテキスト入力時に使われるUITextFieldsをカスタマイズして素敵なエフェクトが追加されたTextFieldEffectsを試してみました。ライセンスはMITです。

https://github.com/raulriera/TextFieldEffects

このTextFieldEffectsですが、何よりまず目を引くのがその名称です。

• Kaede
• Hoshi
• Jiro
• Isao
• Minoru
• Yoko
• Madoka
• Akira
• Yoshiko

README.mdを見るとこちらを気に入ってSwift版を作成したとあったので、元々の名称が日本人名？だった様です。

検証環境

今回は下記環境で試しています。

Xcode	8.2
Swift	3.0.2
CocoaPods	1.0.0

準備

導入

CocoaPodsで追加します。

use_frameworks!
target "ターゲット名"
pod 'TextFieldEffects'

post_install do |installer|
    installer.pods_project.targets.each do |target|
target.build_configurations.each do |configuration|
    configuration.build_settings['SWIFT_VERSION'] = "3.0"
end
    end
end

storyboardから利用する

TextFieldEffectsでは（現時点で）９種類のエフェクトがあります。
どのエフェクトタイプを使うにしても基本的に使い方は一緒です。

1.UITextFieldを置く

storyboard上にUITextFieldを配置します。

2.制約をつける

適宜、制約を設定します。
ここでポイントなのは、高さを指定することです。エフェクトによって差異はありますが４０程度を設定すると良いかもしれません。

3.カスタムクラスを設定する

カスタムクラスを設定します。Classには使いたいエフェクトを設定します。(下の画像ではKaedeTextFieldを設定しています）
また、ModuleにはTextFieldEffectsを設定しましょう。

4.borderStyleを設定

borderStyleは無しにしましょう。

5.ClipToBoundsのチェックを外す

表示が切れてしまうなどする場合はClipToBoundsのチェックを外します。（チェックをつけたままでも表示上問題が無いようでしたらそのままでもかまいません）

6.Placeholderの入力

TextFieldEffectsで重要なのはPlaceholderの入力です。項目名などを必要に応じで入力します。

これで共通する設定は終わりです。次から各エフェクト別にプロパティを設定しましょう。

7.エフェクト別にプロパティを設定する

KaedeTextField

プロパティ名	型	備考
placeholderColor	UIColor
foregroundColor	UIColor
placeholderFontScale	CGFloat	デフォルトは０．８ フォントの大きさに問題が無ければ設定しなくてOK
backgroundColor	UIColor	標準のプロパティ 設定した方が良さそう

HoshiTextField

プロパティ名	型	備考
borderInactiveColor	UIColor
borderActiveColor	UIColor
placeholderColor	UIColor	デフォルトは黒（.black）
placeholderFontScale	CGFloat	デフォルトは０．65 フォントの大きさに問題が無ければ設定しなくてOK

JiroTextField

プロパティ名	型	備考
borderColor	UIColor
placeholderColor	UIColor
placeholderFontScale	CGFloat	デフォルトは０．65 フォントの大きさに問題が無ければ設定しなくてOK

IsaoTextField

プロパティ名	型	備考
inactiveColor	UIColor
activeColor	UIColor
placeholderFontScale	CGFloat	デフォルトは０．65 フォントの大きさに問題が無ければ設定しなくてOK

MinoruTextField

プロパティ名	型	備考
placeholderColor	UIColor
placeholderFontScale	CGFloat	デフォルトは０．６５ フォントの大きさに問題が無ければ設定しなくてOK
Color	UIColor	標準のプロパティ 入力文字の色、枠の色にもなる
backgroundColor	UIColor	標準のプロパティ 設定した方が良さそう

YokoTextField

プロパティ名	型	備考
placeholderColor	UIColor
foregroundColor	UIColor	デフォルトは黒（.black）
placeholderFontScale	CGFloat	デフォルトは０．7 フォントの大きさに問題が無ければ設定しなくてOK

MadokaTextField

プロパティ名	型	備考
placeholderColor	UIColor	デフォルトは黒（.black）
borderColor	UIColor	）
placeholderFontScale	CGFloat	デフォルトは０．65 フォントの大きさに問題が無ければ設定しなくてOK

AkiraTextField

プロパティ名	型	備考
placeholderColor	UIColor	デフォルトは黒（.black）
borderColor	UIColor	）
placeholderFontScale	CGFloat	デフォルトは０．7 フォントの大きさに問題が無ければ設定しなくてOK

YoshikoTextField

プロパティ名	型	備考
activeBorderColor	UIColor	デフォルトは透明（.clear）
inactiveBorderColor	UIColor	デフォルトは透明（.clear）
activeBackgroundColor	UIColor	デフォルトは透明（.clear）
placeholderColor	UIColor	デフォルトはダークグレー（.darkGray）
borderSize	CGFloat	デフォルトは２．０
placeholderFontScale	CGFloat	デフォルトは０．7 フォントの大きさに問題が無ければ設定しなくてOK

実行イメージ

シミュレーターで実行してみました。

さいごに

エフェクトのサンプルはGithubのREADME.mdにアニメーションGIFが載っているので、それを確認すると良いと思います。
また、元になったHTML版のTextInputEffectsも素晴らしいので、こちらもぜひチェックしてみてください。

HTML版 TextInputEffects

• Inspiration for Text Input Effects | codrops
• Text Input Effects DEMO